<template>
	<div class="index" style="height: 100vh; overflow: auto;">
    <div style="width: 750px; margin: 20px auto; ">
      <div style="position: relative; height: 520px;">
        <img :src="all.top_pic" style="width: 750px; height: 300px;">
        <div style="position: absolute; right: 0; top: 0; font-size: 30px; cursor: pointer;" @click="img_log = true"><img src="../../../static/img/shouye10.png" style="width: 47px;"></div>
        <div style="position: absolute; top: 160px; left: 30px; width: 690px; padding: 30px; background: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05); border-radius: 30px;">
          <div class="flexbc">
            <div class="flexbc" style="padding-bottom: 30px; width: 690px;">
              <div class="flexc">
                <div style="position: relative;">
                  <img :src="all.left_pic || 'https://gperson.gantanhaokeji.top/shouye2.png'" style="width: 80px; height: 80px;">
                  <div style="position: absolute; right: 0; top: 0; font-size: 30px; cursor: pointer;" @click="img_log4 = true"><img src="../../../static/img/shouye10.png" style="width: 47px;"></div>
                </div>
                <div class="flexcc">
                  <div style="margin-left: 15px;">
                    <div style="color: rgb(2, 12, 29); font-size: 30px; ">{{all.store_name}}</div>
                    <div style="color: rgb(120, 125, 133); font-size: 22px;">{{all.store_slogan}}</div>
                  </div>
                </div>
              </div>
              <div style="position: relative;" v-if="all.right_radio">
                <img :src="all.right_pic" style="width: 158px; height: 76px;">
                <!-- <div style="position: absolute; right: 0; top: 0; font-size: 30px; cursor: pointer;" @click="img_log3 = true"><img src="../../../static/img/shouye10.png" style="width: 47px;"></div> -->
              </div>
            </div>
            <div style="height: 1px; width: 690px; background: rgb(227, 232, 241); "></div>
            <div class="flex" style="justify-content: space-between; width: 690px; padding-top: 20px;">
              <div style="flex: 1;">
                <div class="flexcc"><img src="../../../static/img/shouye3.png" style="width: 100px; height: 100px; margin-bottom: 10px;"></div>
                <div class="flexcc" style="font-size: 24px;">一键通查</div>
              </div>
              <div style="flex: 1;">
                <div class="flexcc"><img src="../../../static/img/shouye4.png" style="width: 100px; height: 100px; margin-bottom: 10px;"></div>
                <div class="flexcc" style="font-size: 24px;">订单查询</div>
              </div>
              <div style="flex: 1;">
                <div class="flexcc" style="position: relative;">
                  <img src="../../../static/img/shouye5.png" style="width: 100px; height: 100px; margin-bottom: 10px;">
                  <div style="position: absolute; right: 0; top: 0; font-size: 30px; cursor: pointer;" @click="img_log2 = true"><img src="../../../static/img/shouye10.png" style="width: 47px;"></div>
                </div>
                <div class="flexcc" style="font-size: 24px;">联系客服</div>
              </div>
              <div style="flex: 1;" @click="creatQrCode('http://www.baidu.com')">
                <div class="flexcc" style="position: relative;">
                  <div class="flexcc"><img src="../../../static/img/shouye6.png" style="width: 100px; height: 100px; margin-bottom: 10px;"></div>
                  <div style="position: absolute; right: 0; top: 0; font-size: 30px; cursor: pointer;" @click="img_log5 = true"><img src="../../../static/img/shouye10.png" style="width: 47px;"></div>
                </div>
                <div class="flexcc" style="font-size: 24px;">分享店铺</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flexcc" style="margin-bottom: 20px; position: relative;">
        <div style="position: absolute; right: 0; top: 0; font-size: 30px; cursor: pointer;" @click="img_log6show"><img src="../../../static/img/shouye10.png" style="width: 47px;"></div>
        <div style="background: rgb(220, 227, 238); border-radius: 21px; width: 690px; overflow: hidden; height: 160px;"  v-if="lunbo.length > 0">
          <el-carousel :interval="5000" arrow="always" height="160px">
              <el-carousel-item v-for="item2 in lunbo" :key="item2.id">
                <img :src="item2.img">
              </el-carousel-item>
          </el-carousel>
        </div>
        <div style="background: rgb(220, 227, 238); border-radius: 21px; width: 690px; overflow: hidden; height: 160px;" class="flexcc"  v-if="lunbo.length == 0">
          <img src="../../../static/img/shouye11.png" style="width: 48px; height: 48px;">
        </div>
      </div>

      <div class="flex" style="justify-content: space-around; padding:0 30px;">
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 30px; width: 120px; height: 60px; font-size: 28px;" @click="search('')" :class="operator == ''?'act':''">全部</div>
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 30px; width: 120px; height: 60px; font-size: 28px;" @click="search('10086')" :class="operator == '10086'?'act':''">移动</div>
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 30px; width: 120px; height: 60px; font-size: 28px;" @click="search('10010')" :class="operator == '10010'?'act':''">联通</div>
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 30px; width: 120px; height: 60px; font-size: 28px;" @click="search('10000')" :class="operator == '10000'?'act':''">电信</div>
        <div class="flexcc" style="background: rgb(227, 232, 241); border-radius: 30px; width: 120px; height: 60px; font-size: 28px;" @click="search('10099')" :class="operator == '10099'?'act':''">广电</div>
      </div>
      <div style="padding: 30px;">
        <div style="background: rgb(255, 255, 255); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05); border-radius: 30px; position: relative; padding: 20px; margin-bottom: 30px;" v-for="item in list" :key="item.id">
          <div style="position: absolute; left: 0; top: 0;"><img src="../../../static/img/shouye7.png" style="width: 85px; height: 85px;" v-if="item.is_main"></div>
          <div class="flex">
            <div><img :src="item.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" style="width: 200px; height: 200px; margin-right: 20px; border-radius: 10px;"></div>
            <div style="width: 430px;">
              <div style="font-size: 26px; margin-bottom: 20px;">{{item.title}}</div>
              <div style="font-size: 18px; color: rgb(254, 61, 61); margin-bottom: 20px;">{{item.points}}</div>
              <div class="flex">
                <div class="flexcc" style="width: 470px; flex: 1;">
                  <div>
                    <div style="font-size: 22px; margin-bottom: 10px;" class="flexcc">{{item.liuliang}}G</div>
                    <div style="color: rgb(120, 125, 133); font-size: 18px;" class="flexc">通用流量</div>
                  </div>
                </div>
                <div class="flexcc" style="width: 470px; flex: 1;">
                  <div>
                    <div style="font-size: 22px; margin-bottom: 10px;" class="flexcc">{{item.dx_liuliang}}G</div>
                    <div style="color: rgb(120, 125, 133); font-size: 18px;" class="flexc">定向流量</div>
                  </div>
                </div>
                <div class="flexcc" style="width: 470px; flex: 1;">
                  <div>
                    <div style="font-size: 22px; margin-bottom: 10px;" class="flexcc">{{item.yuyin}}分钟</div>
                    <div style="color: rgb(120, 125, 133); font-size: 18px;" class="flexc">通话时长</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex" style="margin-top: 25px;">
            <div style="background: rgb(255, 223, 223); border-radius: 18px; padding: 6px 15px; border-radius: 18px; font-size: 20px; color: rgb(254, 61, 61); margin-right: 20px; margin-bottom: 20px;" v-if="item.selling_point.length>0 && item.selling_point[0]">{{item.selling_point[0]}}</div>
            <div style="background: rgb(223, 255, 228); border-radius: 18px; padding: 6px 15px; border-radius: 18px; font-size: 20px; color: rgb(8, 143, 26); margin-right: 20px; margin-bottom: 20px;" v-if="item.selling_point.length>0 && item.selling_point[1]">{{item.selling_point[1]}}</div>
            <div style="background: rgb(233, 241, 255); border-radius: 18px; padding: 6px 15px; border-radius: 18px; font-size: 20px; color: rgb(0, 90, 255); margin-right: 20px; margin-bottom: 20px;" v-if="item.selling_point.length>0 && item.selling_point[2]">{{item.selling_point[2]}}</div>
            <div style="background: rgb(246, 248, 251); border-radius: 18px; padding: 6px 15px; border-radius: 18px; font-size: 20px; color: rgb(120, 125, 133); margin-bottom: 20px;" v-if="item.selling_point.length>0 && item.selling_point[3]">{{item.selling_point[3]}}</div>
          </div>
          <div class="flexbc">
            <div style="width: 159px; height: 60px; background: rgb(233, 241, 255); border-radius: 40px; font-size: 28px; color: rgb(0, 90, 255);" class="flexcc">
              <div>分享</div>
              <div><img src="../../../static/img/shouye8.png" style="width: 20px; margin-left: 10px;"></div>
            </div>
            <div class="flexcc" style="background: rgb(0, 90, 255); width: 476px; height: 60px; box-shadow: 0px 10px 20px 0px rgba(0, 90, 255, 0.1); border-radius: 30px; font-size: 28px; color: rgb(255, 255, 255);">立即办理</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="图片替换" :visible.sync="img_log" class="ts" center width="420px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div><chuantu :widths="'370px'" :bg="'rgb(222, 233, 242)'" :imgs="all.top_pic" :txt="'点击上传图片'" @getimg="getimg" v-if="relo"></chuantu></div>
      <div class="flex" style="justify-content: space-around; margin-top: 30px;">
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(213, 213, 213); border-radius: 24px;" class="flexcc" @click="img_log = false">取消</div>
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(64, 156, 255); color: rgb(255, 255, 255); border-radius: 24px;" class="flexcc" @click="baocun">确定</div>
      </div>
    </el-dialog>
    <el-dialog title="图片替换" :visible.sync="img_log3" class="ts" center width="420px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div><chuantu :widths="'370px'" :bg="'rgb(222, 233, 242)'" :imgs="all.top_pic" :txt="'点击上传图片'" @getimg="getimg3" v-if="relo"></chuantu></div>
      <div class="flex" style="justify-content: space-around; margin-top: 30px;">
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(213, 213, 213); border-radius: 24px;" class="flexcc" @click="img_log3 = false">取消</div>
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(64, 156, 255); color: rgb(255, 255, 255); border-radius: 24px;" class="flexcc" @click="baocun">确定</div>
      </div>
    </el-dialog>
    <el-dialog title="联系客服" :visible.sync="img_log2" class="ts" center width="420px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="flexcc"><chuantu :widths="'230px'" :heights="'230px'" :txt="'点击上传二维码'" :bg="'rgb(222, 233, 242)'" :imgs="all.img" @getimg="getimg2" v-if="relo"></chuantu></div>
      <div style="margin: 30px 0;"><el-input v-model="all.img_url" placeholder="输入企微客服跳转链接" style="width: 370px;"></el-input></div>
      <div class="flex" style="justify-content: space-around; margin-top: 30px;">
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(213, 213, 213); border-radius: 24px;" class="flexcc" @click="img_log2 = false">取消</div>
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(64, 156, 255); color: rgb(255, 255, 255); border-radius: 24px;" class="flexcc" @click="baocun">确定</div>
      </div>
    </el-dialog>
    <el-dialog title="店铺名称" :visible.sync="img_log4" class="ts" center width="420px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div style="margin-bottom: 20px;"><el-input v-model="all.store_name" placeholder="输入店铺名称" style="width: 370px;"></el-input></div>
      <div style="margin-bottom: 20px;"><el-input v-model="all.store_slogan" placeholder="输入店铺宣传语" style="width: 370px;"></el-input></div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="margin-right: 10px;">店铺LOGO图标：</div>
        <chuantu :widths="'200px'" :heights="'200px'" :bg="'rgb(222, 233, 242)'"  :txt="'点击上传图片'" :imgs="all.left_pic" @getimg="getimg4" v-if="relo"></chuantu>
      </div>
      <div style="margin-bottom: 30px;" class="flexc">
        店铺评分：
        <div style="width: 180px; border-radius: 20px; height: 40px; border-radius: 20px; border: 1px solid rgb(228, 227, 227); overflow: hidden;" class="flex">
          <div style="flex: 1;" class="flexcc" @click="all.right_radio = 1" :class="all.right_radio == 1?'xianshi':'buxianshi'">显示</div>
          <div style="flex: 1;" class="flexcc" @click="all.right_radio = 0" :class="all.right_radio == 0?'xianshi':'buxianshi'">不显示</div>
        </div>
      </div>
      <div class="flex" style="justify-content: space-around; margin-top: 30px;">
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(213, 213, 213); border-radius: 24px;" class="flexcc" @click="img_log4 = false">取消</div>
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(64, 156, 255); color: rgb(255, 255, 255); border-radius: 24px;" class="flexcc" @click="baocun">确定</div>
      </div>
    </el-dialog>
    <el-dialog title="分享店铺" :visible.sync="img_log5" center width="420px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="flexcc"><chuantu :widths="'230px'" :heights="'230px'" :txt="'点击上传海报'" :bg="'rgb(222, 233, 242)'" :imgs="all.poster" @getimg="getimg5" v-if="relo"></chuantu></div>
      <div style="text-align: center; padding: 20px; color: rgb(88, 88, 88);">下载下方二维码然后制作完分享海报后上传</div>
      <div class="flexcc"><div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto;"></div></div>
      <div style="text-align: center; padding: 20px; color: rgb(88, 88, 88);">我的店铺二维码</div>
      <div style="text-align: center; color: rgb(26, 18, 243);" @click="xiazai">保存二维码</div>
      <div class="flex" style="justify-content: space-around; margin-top: 30px;">
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(213, 213, 213); border-radius: 24px;" class="flexcc" @click="img_log5 = false">取消</div>
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(64, 156, 255); color: rgb(255, 255, 255); border-radius: 24px;" class="flexcc" @click="baocun">确定</div>
      </div>
    </el-dialog>

    <el-dialog title="轮播图" :visible.sync="img_log6" class="ts2" center width="580px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div v-for="(item,index) in lunbo2" :key="index" style="background: rgb(246, 248, 251); padding:30px; margin-bottom: 20px;" @click="changeindex(index)">
        <div>{{index+1}}/3</div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="margin-right: 10px;">上传图片：</div>
          <chuantu :widths="'110px'" :heights="'110px'" :bg="'rgb(239, 239, 239)'"  :buyaoshanchu="true" :txt="'点击上传图片'" :imgs="item.img" @getimg="getimg6" v-if="relo"></chuantu>
          <div style="margin: 0 10px;">宽度不超过1080像素</div>
          <div style="width: 73px; height: 34px; font-size: 14px; background: rgb(228, 234, 236); cursor: pointer; color: rgb(0, 97, 255); border-radius: 17px;" class="flexcc" @click="shanchulunbo(item,index)" >删除</div>
        </div>
        <div class="flexc" style="margin-bottom: 20px;">
          <div style="margin-right: 10px;">跳转地址：</div>
          <div ><el-input v-model="item.img_url" placeholder="输入点击图片后跳转的网址" style="width: 270px;"></el-input></div>
        </div>

      </div>
      <div style="width: 98px; height: 42px;  cursor: pointer; font-size: 14px; background: rgb(233, 245, 255); border: 1px solid rgb(0, 97, 255); color: rgb(0, 97, 255); border-radius: 24px;" class="flexcc" @click="xinzenglunbo" v-if="lunbo2.length <= 2">新增图片</div>

      <div class="flex" style="justify-content: space-around; margin-top: 30px;" v-if="lunbo2.length > 0">
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(213, 213, 213);  cursor: pointer; border-radius: 24px;" class="flexcc" @click="img_log6 = false">取消</div>
        <div style="width: 98px; height: 42px; font-size: 14px; background: rgb(64, 156, 255);  cursor: pointer; color: rgb(255, 255, 255); border-radius: 24px;" class="flexcc" @click="baocunlunbo">确定</div>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import chuantu from '@/components/chuantu.vue'
	export default {
    components:{
      chuantu
    },
		name: 'index',
		data() {
			return {
        all:{},
        img_log:false,
        img_log2:false,
        img_log3:false,
        img_log4:false,
        img_log6:false,
        relo:true,
        list:[],
        img_log5:false,
        user:"",
        operator:"",
        lunbo:[],
        lunbo2:[],
        lunboindex:0
			}
		},
		created() {
      this.getinfo()
      this.getlist()
      axios.get('/own/auth/user').then((response)=>{
      	if (response.data.msg.code == 0) {
          this.user = response.data.data
      	} else {
      		this.$message.error(response.data.msg.info);
      	}
      })
		},
		mounted() {

		},
		methods: {
      img_log6show:function(){
        this.img_log6 = true
      },
      changeindex:function(index){
        this.lunboindex = index
        console.log(this.lunboindex)
      },
      shanchulunbo:function(item,index){
        console.log(index)
        if(item.id){
          //删除
          axios.post('/own/mstore/pic/delete',{
            "mstore_id": this.all.id,
            "id": item.id,
          }).then((response)=>{
          	if (response.data.msg.code == 0) {
              this.$message.success('删除成功');
              this.getlunbo()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        }else{
          this.lunbo2.splice(index,1)
        }
      },
      xinzenglunbo:function(){
        this.lunbo2.push({
          img:"",
          img_url:"",
          id:""
        })
      },
      search:function(val){
        this.operator = val
        this.getlist()
      },
      xiazai:function(){
        let img = document.getElementsByClassName('qrcode')[0].childNodes[1]
        var a = document.createElement('a');
                 a.download = 'erweima';//这边是文件名，可以自定义
                 a.href = img.src;
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
      },
      creatQrCode(url) {
        this.img_log5 = true
        this.$nextTick(()=>{
          this.$refs.qrCodeUrl.innerHTML = '';
          let url = `${window.location.origin}/h5`
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: url, // 需要转换为二维码的内容
              width: 200,
              height: 200,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
        })
      },
      getlist:function(){
        axios.get('/own/page/list',{params:{page:1,page_size:200,operator:this.operator,status:100}}).then((response)=>{
        	if (response.data.msg.code == 0) {
            response.data.data.data.forEach(item=>{
              if(item.selling_point){
                item.selling_point = JSON.parse(item.selling_point)
              }
            })
            this.list = response.data.data.data

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getimg:function(item){
        this.all.top_pic = item
      },
      getimg4:function(item){
        this.all.left_pic = item
      },

      getimg5:function(item){
        this.all.poster = item
      },

      getimg6:function(item){

        this.lunbo2[this.lunboindex].img = item
      },

      getimg2:function(item){
        this.all.img = item
      },

      getimg3:function(item){
        this.all.right_pic = item
      },

      baocunlunbo:function(){
        axios.post('/own/mstore/pics',{
          "mstore_id": this.all.id,
          "datas": this.lunbo2,
        }).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('保存成功');
            this.img_log6 = false
            this.getlunbo()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },


      baocun:function(){
        axios.post('/own/mstore/update',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.getinfo()
            this.img_log = false
            this.img_log2 = false
            this.img_log3 = false
            this.img_log4 = false
            this.img_log5 = false
            this.img_log6 = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      setinfo:function(){
        let obj = {
          store_name:"我的微小店",
          store_slogan:"我的微小店介绍",
          top_pic:"https://test91.91haoka.cn/shouye1.png",
          left_pic:"https://test91.91haoka.cn/shouye2.png",
          right_pic:"https://test91.91haoka.cn/shouye9.png"
        }
        axios.post('/own/mstore/update',obj).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.getinfo()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getinfo:function(){
        axios.get('/own/mstore/info').then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data == null){
              this.setinfo()

            }else{
              this.all = response.data.data
              this.baocunobj = JSON.parse(JSON.stringify(this.all))
              this.getlunbo()

            }
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getlunbo:function(){
        axios.get('/own/mstore/pics?mstore_id='+this.all.id).then((response2)=>{
        	if (response2.data.msg.code == 0) {
            this.lunbo = response2.data.data
            this.lunbo2 = JSON.parse(JSON.stringify(response2.data.data))
        	} else {
        		this.$message.error(response2.data.msg.info);
        	}
        })
      }
		}
	}
</script>


<style scoped lang="less">

  /deep/ .el-dialog{ background: rgb(246, 248, 251); border-radius: 29px;}
  .xianshi{background: rgb(64, 156, 255) !important; color: #fff !important;}
  .act{background: rgb(0, 90, 255) !important; color: #fff;}
  .ts2{
    /deep/ .el-dialog{
      background: #fff;
    }
  }
</style>
